<template>
  <div>
    <supertable
      class="RoleTable"
      :tableData="tableData"
      :headerData="headerData"
      :isoperation="true"
      :total="tableData.length"
      @Delete="DeleteFn"
    >
      <template v-slot:formSolt>
        <div class="formSolt">
          <el-input
            class="RoleInput"
            size="small"
            placeholder="请输入任务名"
            v-model="input"
          ></el-input>
          <el-button
            class="searchBtn"
            type="success"
            icon="el-icon-search"
            size="mini"
            @click="TaskListInterfaceFn()"
            >搜索</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-refresh"
            size="mini"
            @click="reset()"
            >重置</el-button
          >
        </div>
      </template>
      <template v-slot:btnSolt>
        <div class="btnSolt">
          <el-button
            type="success"
            icon="el-icon-plus"
            size="mini"
            @click="add()"
            >添加</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="modification()"
            >修改</el-button
          >
          <!-- <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="roleDeleteFn()"
            >删除</el-button
          > -->
          <el-button
            type="danger"
            icon="el-icon-setting"
            size="mini"
            @click="TaskManagementDeleteFn()"
            >删除</el-button
          >
        </div>
      </template>
      <template> </template>
      <template v-slot:operationBtn="row">
        <div>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="editItem(row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            :icon="
              row.operationData.disabled ? 'el-icon-turn-off' : 'el-icon-open'
            "
            @click="disable(row)"
            >{{ row.operationData.disabled ? "启用" : "禁用" }}</el-button
          >
        </div>
      </template>
    </supertable>
    <!-- 添加 -->
    <el-dialog title="添加任务" :visible.sync="dialogVisible" width="70%">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="定时规则" prop="cron">
              <el-input v-model="ruleForm.cron"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="执行类" prop="jobClass">
              <el-input v-model="ruleForm.jobClass" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务说明" prop="note">
              <el-input v-model="ruleForm.note" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行参数" prop="data">
              <el-input v-model="ruleForm.data" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog :title="formTitle" :visible.sync="formVisible" width="70%">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="定时规则" prop="cron">
              <el-input v-model="form.cron"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="执行类" prop="jobClass">
              <el-input v-model="form.jobClass" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务说明" prop="cfgDesc">
              <el-input v-model="form.note" type="textarea"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="执行参数" prop="data">
              <el-input v-model="form.data" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import supertable from "@/components/supertable";
import {
  TaskListInterface,
  taskEdit,
  taskAdd,
  deleteData,
  isDIsabledTrue,
  isDIsabledFalse,
} from "@/api/TaskManagement";

export default {
  data() {
    return {
      val: "",
      dialogVisible: false,
      formVisible: false,
      input: "",
      tableData: [],
      formTitle: "修改任务",
      ruleForm: {
        name: "",
        jobClass: "",
        cron: "",
        note: "",
        data: "",
      },
      headerData: [
        {
          prop: "name",
          label: "任务名",
          width: "",
        },
        {
          prop: "jobClass",
          label: "执行类",
          width: "280",
        },
        {
          prop: "cron",
          label: "定时规则",
          width: "",
        },
        {
          prop: "note",
          label: "说明",
          width: "",
        },
        {
          prop: "execAt",
          label: "最近执行时间",
          width: "",
        },
        {
          prop: "execResult",
          label: "最近执行结果",
          width: "",
        },
        // {
        //   prop: "edit",
        //   label: "操作",
        //   width: "",
        //   slot: true
        // }
      ],
      form: {
        id: null,
        name: "",
        jobClass: "",
        cron: "",
        note: "",
        disabled: true,
        data: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入任务名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        jobClass: [
          { required: true, message: "请输入执行类", trigger: "blur" },
        ],
        cron: [{ required: true, message: "请输入定时规则", trigger: "blur" }],
      },
      selRow: {},
    };
  },
  mounted() {
    let _self = this;
    _self.TaskListInterfaceFn();
  },
  methods: {
    //是否禁用
    disable(row) {
      let _self = this;
      console.log(row);
      let data = {
        taskId: row.operationData.id,
      };
      if (row.operationData.disabled == false) {
        isDIsabledFalse(data).then((res) => {
          console.log(res);
          if (res.code == 20000) {
            _self.TaskListInterfaceFn();
            this.$message({
              message: "禁用成功",
              type: "success",
            });
          }
        });
      } else {
        isDIsabledTrue(data).then((res) => {
          console.log(res);
          if (res.code == 20000) {
            _self.TaskListInterfaceFn();
            this.$message({
              message: "启用成功",
              type: "success",
            });
          }
        });
      }
    },
    //删除
    TaskManagementDeleteFn() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let _self = this;
          let data = {
            id: _self.val.id,
          };
          deleteData(data).then((res) => {
            console.log(res);
            if (res.code == 20000) {
              _self.TaskListInterfaceFn();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    add() {
      let _self = this;
      _self.dialogVisible = true;
      _self.ruleForm.name = "";
      _self.ruleForm.jobClass = "";
      _self.ruleForm.cron = "";
      _self.ruleForm.note = "";
      _self.ruleForm.data = "";
    },

    //添加提交
    addSubmit() {
      let _self = this;
      let data = {
        name: _self.ruleForm.name,
        jobClass: _self.ruleForm.jobClass,
        cron: _self.ruleForm.cron,
        data: _self.ruleForm.data,
        note: _self.ruleForm.note,
      };
      data.name = encodeURIComponent(data.name);
      data.data = encodeURIComponent(data.data);
      taskAdd(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          _self.TaskListInterfaceFn();
          _self.dialogVisible = false;
           this.$message({
            type: "success",
            message: "添加成功!",
          });
        }
      });
    },

    //上层修改
    DeleteFn(val) {
      let _self = this;
      console.log(val);
      _self.val = val[0];
      _self.form.name = val[0].name;
      _self.form.id = val[0].id;
      _self.form.note = val[0].note;
      _self.form.jobClass = val[0].jobClass;
      _self.form.cron = val[0].cron;
      _self.form.data = val[0].data;
    },

    modification() {
      let _self = this;
      _self.formVisible = true;
    },
    reset() {
      let _self = this;
      _self.input = "";
      _self.TaskListInterfaceFn();
    },

    //行数据传值
    // IDchangeFn(val) {
    //   let _self = this;
    //   console.log(val);
    //   _self.val = val;
    // },
    resetForm() {
      this.form = {};
    },
    editItem(row) {
      let _self = this;
      console.log(row);
      _self.val = row.operationData;
      _self.formVisible = true;
      _self.edit();
    },
    edit() {
      let _self = this;
      _self.formTitle = "修改任务";
      _self.formVisible = true;
      _self.form.name = _self.val.name;
      _self.form.id = _self.val.id;
      _self.form.note = _self.val.note;
      _self.form.jobClass = _self.val.jobClass;
      _self.form.cron = _self.val.cron;
      _self.form.data = _self.val.data;
    },
    //修改提交
    editSubmit() {
      let _self = this;
      let data = {
        id: _self.form.id,
        name: _self.form.name,
        jobClass: _self.form.jobClass,
        cron: _self.form.cron,
        data: _self.form.data,
        note: _self.form.note,
      };
      data.name = encodeURIComponent(data.name);
      data.data = encodeURIComponent(data.data);
      data.note = encodeURIComponent(data.note);
      taskEdit(data).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          _self.TaskListInterfaceFn();
          _self.formVisible = false;
           this.$message({
            type: "success",
            message: "操作成功!",
          });
        }
      });
    },

    //表格数据
    TaskListInterfaceFn() {
      let _self = this;
      let data = {
        name: _self.input,
        page: "1",
      };
      TaskListInterface(data).then((res) => {
        let _self = this;
        _self.tableData = [];
        console.log(res);
        if ((res.code = 20000)) {
          for (let item of res.data) {
            _self.tableData.push({
              name: item.name,
              jobClass: item.jobClass,
              cron: item.cron,
              note: item.note,
              execResult: item.execResult,
              execAt: item.execAt,
              id: item.id,
              data: item.data,
              disabled: item.disabled,
            });
          }
        }
      });
    },
  },
  components: {
    supertable,
  },
};
</script>

<style lang="scss" scoped>
.RoleInput {
  width: 400px;
  margin: 20px 0;
}
.RoleTable {
  margin: 20px;
}
.btnSolt {
  margin: 10px 0;
}
.searchBtn {
  margin-left: 10px;
}
.elForm .el-form-item {
  margin: 5px 0;
}
</style>
